import { Dayjs } from "dayjs";
import { CSSProperties } from "react";
import useMergeState from "../utils/useMergeState";
import Month from "./Month";

export interface CalendarProps {
  value: Dayjs;
  defaultValue?: Dayjs;
  className?: string;
  style?: CSSProperties;
  onChange?: (date: Dayjs) => void;
  locale?: string;
}

function Calendar(props: CalendarProps) {
  const { value, onChange } = props;
  const [curValue, setCurValue] = useMergeState<Dayjs>(
    value,
    { onChange }
  );

  function selectHandler(date: Dayjs) {
    setCurValue(date);
  }

  return (
    <div className="h-screen flex items-center justify-center">
      <div className="text-center">
        {curValue.format("YYYY-MM-DD")}
        <div className="flex justify-center items-center ">
          <Month
            value={curValue}
            onChange={selectHandler}
          />
        </div>
      </div>
    </div>
  );
}

export default Calendar;
